<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日志系统</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="../front/public/js/vue.js"></script>
    <script src="../front/public/js/index.min.js"></script>
    <link rel="stylesheet" href="../front/public/js/index.min.css"/>
    <script src="./codeContanst.js"></script>
    <script src="../front/public/js/jquery.highlight.js"></script>
</head>
<body>
<style>
    .highlight {
        background: yellow;
    }
</style>
<div>
    <div id="app">
        <div>
            <el-input type="text" placeholder="输入你的日志文件路径" v-model="filePath"></el-input>
            <div style="position: fixed;right: 20px;top: 20px;z-index:999;">
                <button type="text" @click="startWatchFile">开始监听/刷新</button>
            </div>
        </div>
        <div style="position: fixed;top: 40px;right: 10px;z-index:888;padding-left: 10px;" v-if="filePath">
            <h3>过滤器</h3>
            <div style="display: flex">
                <textArea v-model="filterStr" style="height: 100px;min-width: 300px;"></textArea>
                <div style="padding-left: 10px;">
                    <ul>
                        <li v-for="str in filterStrArray" :key="str" style="cursor: pointer;">{{str}}</li>
                    </ul>
                </div>
            </div>

            <h3>ignore</h3>
            <textArea v-model="ignoreStr" style="height: 100px;min-width: 600px;"></textArea>
        </div>
        <!--显示日志-->
        <el-card id="logsContainer"
                 style="margin-top: 20px;min-height: 2000px;background: #fcfaf2;width: calc(100% - 650px);">
            <ul>
                <li v-for="(item,index) in logsArray" :key="index" style="padding-bottom: 10px;line-height: 30px;">
                    {{index}}:{{item}}
                </li>
            </ul>
        </el-card>

    </div>

</div>
<script>
    window._uuid = ""


    function safeParseJson(str) {
        try {
            return JSON.parse(str)
        } catch (e) {
            return null
            console.error('转换json失败', str)

        }
    }

    function displayContent(str) {
        console.log(str)
    }

    function sendMessage(str, code = 200) {
        socket.send(JSON.stringify({
            uuid: window._uuid,
            message: str,
            code
        }));

    }

    function scroll2bottom() {
        var objDiv = document.querySelector('.highlight');
        if (objDiv) {
            $('html').animate({scrollTop: objDiv.offsetTop - 300})
            console.log("objDiv.offsetTop", objDiv.offsetTop)
        }

    }


    var socket = new WebSocket("ws://localhost:11111");

    const maxLine = 100

    function array100Push(array, one) {
        if (array.length > maxLine) {
            array.shift()
        }
        array.push(one)
    }

    socket.onmessage = function (msg) {
        var resive = safeParseJson(msg.data)
        if (resive.code == code_init) {
            window._uuid = resive.uuid;
            console.log("连接成功", window._uuid)
        }
        //监听文件修改得到的文本
        if (resive.code == code_file_change_message) {
            var message = resive.message
            //如果这个信息在 ignoreStrArray中 排除掉
            var ignoreStrArray = window._vm.$data.ignoreStr.split("\n")
            ignoreStrArray = ignoreStrArray.filter(item => {
                return item != ''
            })
            //如果没有 ignoreStr 直接添加
            if (!window._vm.$data.ignoreStr) {
                array100Push(window._vm.$data.logsArray, message)
                return false
            }
            var isIgnore = false;
            ignoreStrArray.map(str => {
                //存在
                if (message.indexOf(str) >= 0) {
                    isIgnore = true;
                }
            })
            if (!isIgnore) {
                array100Push(window._vm.$data.logsArray, message)
            }
        }


    };

    socket.onclose = function (msg) {
        console.log("socket closed!")
    };

    function initApp() {
        window._vm = new Vue({
            el: "#app",
            data() {
                return {
                    filePath: sessionStorage.getItem("filePath"),
                    //默认100条的logs
                    logsArray: [],
                    filterStr: sessionStorage.getItem("filterStr") || '',
                    filterStrArray: [],
                    ignoreStr: sessionStorage.getItem("ignoreStr") || '',
                }
            },
            mounted() {
                var self = this;
                $('body #logsContainer').unhighlight();
                self.filterStrArray = self.filterStr && self.filterStr.split && self.filterStr.split('\n').map(str => {
                    if (str) {
                        $('body #logsContainer').highlight(str.trim());
                        return str
                    }
                })
            },
            methods: {
                startWatchFile() {
                    var self = this;
                    if (!this.filePath) {
                        return false;
                    }

                    if (this.filePath) {
                        sessionStorage.setItem("filePath", this.filePath)
                        sessionStorage.setItem("filterStr", this.filterStr)
                        sessionStorage.setItem("ignoreStr", this.ignoreStr)
                    }
                    this.$data.logsArray = []
                    //成功建立联系之后发送请求开始监听文件
                    window._vm.socket.send(JSON.stringify({
                        code: code_file_watch,
                        fileName: self.filePath,
                        uuid: window._uuid
                    }))

                    setTimeout(() => {
                        //高光
                        $('body #logsContainer').unhighlight();
                        window._vm.$data.filterStrArray = window._vm.$data.filterStr &&
                            window._vm.$data.filterStr.split &&
                            window._vm.$data.filterStr.split('\n').map(str => {
                                if (str) {
                                    $('body #logsContainer').highlight(str.trim());
                                    return str
                                }
                            })
                        setTimeout(() => {
                            scroll2bottom();
                        }, 100)
                    }, 3000)
                }
            }
        })
        window._vm.socket = socket
    }

    $(document).ready(() => {
        initApp()
        $('#sendButton').click(() => {
            sendMessage($('input').val())
        })


    })
</script>
</body>
</html>